<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="static/style/zb_init.css" />
	<link rel="stylesheet" type="text/css" href="static/style/common.css" />
	<script src="./static/script/vue.min.js"></script>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

</head>

<body>
	<div id="container">
		<div>

			<div class="nav">
				<ol class="clear">
					<li class="active">
						<span class="active">计时代办(<span class="task"></span>)</span>
					</li>
					<li>
						<span>不计时代办</span>
					</li>
					<li>
						<span>会议提醒</span>
					</li>
				</ol>
			</div>
		</div>
		<div class="mt40">
			<div class="list active" id="list1">
				<a v-for="item in listData" href="./first.html#/home?a=1&processDefinitionKey=materialEntryApprovalProc&access_token=86104e068918451aa9dbdd07fd7f96e4&procUnitId=Apply&catalogId=process&taskKindId=task&procInstId=155884705&procUnitHandlerId=&bizId=2862037073&isReadOnly=false&procInstEndTime=&taskStatusId=ready&bizCode=CMME170901721808&taskId=155884708&statusId=ready&name=%E5%A1%AB%E5%86%99%E6%9D%90%E6%96%99%E8%BF%9B%E5%9C%BA%E7%94%B3%E8%AF%B7%E5%8D%95&viewTaskKindId=1&url=cmMaterialEntryAction!forwardDetail.job">
					<div>
						<div class="title">
							<img src="./static/images/ic_home_task-icon-task.png" width="16" />
							<span v-html="item.description">合同材料进场</span>
						</div>
						<div class="detail clear">
							<span class="dep fl" v-html="item.creatorPersonMemberName"></span>
							<span class="time fr" v-html="item.procInstStartTime">2015年7月10日 13:39</span>
						</div>
					</div>
				</a>

			</div>
			<div class="list">
				<a href="">
					<div>
						<div class="title">
							<img src="./static/images/ic_home_task-icon-task.png" width="16" />
							<span>工联单：关于加强挨打哈伦裤刷的k卡</span>
						</div>
						<div class="detail clear">
							<span class="dep fl">蓝光信息部 信息管理部门</span>
							<span class="time fr">2015年7月10日 13:39</span>
						</div>
					</div>
				</a>
				<a href="">
					<div>
						<div class="title">
							<img src="./static/images/ic_home_task-icon-task.png" width="16" />
							<span>工联单：关于加强挨打哈伦裤刷sdjk卡</span>
						</div>
						<div class="detail clear">
							<span class="dep fl">蓝光信息部 信息管理部门</span>
							<span class="time fr">2015年7月10日 13:39</span>
						</div>
					</div>
				</a>
			</div>
			<div class="list">
				<a href="">
					<div>
						<div class="title">
							<img src="../images/ic_home_task-icon-task.png" width="16" />
							<span>工联单：关于加强挨打哈伦裤刷的dsk卡</span>
						</div>
						<div class="detail clear">
							<span class="dep fl">蓝光信息部 信息管理部门</span>
							<span class="time fr">2015年7月10日 13:39</span>
						</div>
					</div>
				</a>
				<a href="">
					<div>
						<div class="title">
							<img src="../images/ic_home_task-icon-task.png" width="16" />
							<span>工联单：关于加强挨打哈伦裤刷的dskjfhsdkfashdfkjhsdjk卡</span>
						</div>
						<div class="detail clear">
							<span class="dep fl">蓝光信息部 信息管理部门</span>
							<span class="time fr">2015年7月10日 13:39</span>
						</div>
					</div>
				</a>
			</div>
		</div>
	</div>
</body>

</html>
<script type="text/javascript">
	var PACTERA_URL = "http://test.pactera.com",//代理url，
		XT_URL = 'http://xtm.brc.com.cn:9998',
		accesstoken = '86104e068918451aa9dbdd07fd7f96e4';

	$.ajax({
		url: PACTERA_URL + '/BrcDataService/data/httppoxy', // 代理url
		type: "post",
		dataType: 'JSON',
		data: {
			page: 1,
			pagesize: 30,
			queryCategory: 'myTransaction',
			searchContent: '',
			dateRange: 1,
			sortname: 'startTime',
			sortorder: 'desc',
			viewTaskKindList: 1,
			access_token: accesstoken,
			url: XT_URL + '/xt/workflowAction!queryTasks.mbApp'
		},
		success: function (res) {

			var listData = res.data.Rows;
			$('.task').html(res.data.Total);
			for (var i = 0, len = listData.length; i < len; i++) {
				var o = listData[i];
				var str = '<a href=first.html#/' + getUrl(o) + '?a=1&processDefinitionKey=' + o.processDefinitionKey + '&procUnitId=' + o.taskDefKey + '&taskKindId=' + o.kindId
					+ '&procDefId=' + o.procDefId + '&procInstId=' + o.procInstId + '&procUnitHandlerId=' + o.procUnitHandlerId
					+ '&bizId=' + o.bizId + '&isReadOnly=' + (o.isReadOnly || false) + '&procInstEndTime=' + o.procInstEndTime + '&taskStatusId=' + o.statusId
					+ '&bizCode=' + o.bizCode + '&taskId=' + o.id + '&statusId=' + o.statusId + '&name=' + o.name + '&access_token=' + accesstoken +
					'><div><div class="title"><img src="./static/images/ic_home_task-icon-task.png" width="16" ><span>' + o.description
					+ '</span></div><div class="detail clear"><span class="dep fl">' + o.creatorPersonMemberName + '</span><span class="time fr">' + o.procInstStartTime + '</span></div></div></a>'
				$('#list1').append(str);
			}
		},
		error: function (sta) {

		}
	})

	function getUrl(o) {
		var ind = o.executorUrl.indexOf('!');
		var url = o.executorUrl.substring(0, ind);
		return url;
	}
	var oNav = document.getElementsByClassName('nav')[0],
		aLi = oNav.getElementsByTagName('li'),
		aDiv = document.getElementsByClassName('list');
	console.log(aLi);

	for (var i = 0, len = aLi.length; i < len; i++) {
		aLi[i].onclick = function () {
			change(this)
		}
	}

	function change(obj) {
		for (var i = 0; i < aLi.length; i++) {
			if (aLi[i] == obj) {
				aLi[i].className = "active";
				aDiv[i].className = "list active";
			} else {
				aLi[i].className = "";
				aDiv[i].className = "list";
			}
		}
	}

</script>